import type { EChartsOption } from "echarts";

export async function getOption(echarts): Promise<EChartsOption> {
	const colors = ['#00FFFF', '#02FF67', '#675bba'];
	return {
		backgroundColor: '#081736',
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			}
		},
		grid: {
			top: '20%',
			right: '5%',
			left: '10%',
			bottom: '20%'
		},

		xAxis: [{
			type: 'category',
			axisLabel: {
				color: '#fff',
				interval:0
			},
			axisLine: {
				show: true,
				lineStyle: {
					color: '#0a3e98'
				}
			},
			axisTick: {
				show: false,
			},
			splitLine: {
				show: false,
				lineStyle: {
					color: '#195384',
					type: "dotted",
				}
			},
			data: ['博雅社区','曹家村','大草坝村','大东关社区','杜家漕村','黄家村','栗子园村','莲花池村','廉家庄村','吕家村','马家店村','庙坡村','石家庄村','五郎庙村','小东关社区','小西关村','谢家井社区','湑水村','翟家寺村']
		}],
		yAxis: [
			{
				type: 'value',
				name: "人",
				min: 0,
				position: 'left',
				nameTextStyle: {
					color: "#fff",
					fontSize: 11,
				},
				axisLine: {
					lineStyle: {
						color: '#0a3e98'
					}
				},
				axisTick: {
					show: false,
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#0a3e98',
						type: "dotted",
					}
				},
				axisLabel: {
					formatter: '{value}',
					color: "#fff",
				},
			}
		],
		dataZoom: [
			{
				show: true,
				realtime: true,
				start: 0,
				end: 50
			},
			{
				type: 'inside',
				realtime: true,
				start: 0,
				end: 50
			}
		],
		series: [
			{
				name: "",
				type: 'pictorialBar',
				symbolSize: [20, 10],
				symbolOffset: [0, -6],
				symbolPosition: 'end',
				z: 12,
				// "barWidth": "0",
				tooltip:{
					show:false
				},
				label: {
					show: true,
					position: "top",
					// "formatter": "{c}%"
					fontSize: 12,
					color: '#34DCFF'
				},
				color: "#77AFFE",
				data: ['43','19','18','32','17','32','15','18','18','21','31','25','15','22','13','17','10','18','18']
			},
			{
				name: '',
				type: 'pictorialBar',
				symbolSize: [20, 10],
				symbolOffset: [0, 7],
				// "barWidth": "20",
				z: 12,
				tooltip:{
					show:false
				},
				color: "#0647AB",
				data: ['43','19','18','32','17','32','15','18','18','21','31','25','15','22','13','17','10','18','18']
			},
			{
				type: 'bar',
				//silent: true,
				barWidth: "20",
				barGap: '10%', // Make series be overlap
				itemStyle: {
					color: new echarts.graphic.LinearGradient(0, 0, 0, 0.7, [{
						offset: 0,
						color: "#3D8BF8"
					},
						{
							offset: 1,
							color: "#0545A5"
						}
					]),
					opacity: 0.8
				},
				data: ['43','19','18','32','17','32','15','18','18','21','31','25','15','22','13','17','10','18','18']
			}
		]
	};
}
